<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>故障类型</title>
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/mui.picker.min.css">
    <link rel="stylesheet" href="css/weui.css">
    <link rel="stylesheet" href="css/example.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mui-page" id="gzlx-wrap">

    <!--页面主内容区开始-->
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <div class="mui-table-view-cell table-title">
                        <i class="color1 iconfont text-size1 mid">&#xe696;</i>
                        <span>故障分类</span>
                    </div>
                    <li class="mui-table-view-cell">
                       <ul class="fault-class mui-clearfix">
                           <li class="fault-class-active">发动机</li>
                           <li>异响</li>
                           <li>灯亮</li>
                           <li>漏水</li>
                           <li>空调电器</li>
                           <li>事故</li>
                           <li>漏油</li>
                       </ul>
                    </li>
                </ul>
                <ul class="mui-table-view">
                    <div class="mui-table-view-cell table-title">
                        <i class="color1 iconfont text-size1 mid">&#xe608;</i>
                        <span>故障分类(可多选)</span>
                    </div>
                    <div id="faultClassWrap">
                        <li class="mui-table-view-cell mui-checkbox mui-left">
                            <input name="checkbox" type="checkbox">空调系统清洗
                        </li>
                    </div>
                </ul>
                <ul class="mui-table-view">
                    <div class="mui-table-view-cell table-title">
                        <i class="color1 iconfont text-size1 mid">&#xe606;</i>
                        <span>上传图片</span>
                    </div>
                    <li class="mui-table-view-cell">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
                        </div>
                    </li>

                </ul>
                <ul class="mui-table-view mui-input-group">
                    <div class="mui-table-view-cell table-title">
                        <i class="color1 iconfont text-size1 mid">&#xe610;</i>
                        <span>故障描述</span>
                    </div>
                    <div class="mui-input-row" style="height: 100px;">
                        <textarea id="textarea" rows="5" placeholder="请输入故障详细信息" style="position: absolute; top:0"></textarea>
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <!--页面主内容区结束-->
    </div>
    <div class="fixed-footer">
        <div class="footer-block-btn">确认</div>
    </div>
    <!--图片展示删除区-->
    <div class="weui-gallery" id="gallery">
        <span class="weui-gallery__img" id="galleryImg"></span>
        <div class="weui-gallery__opr">
            <a href="javascript:" class="weui-gallery__del" id="delBtn">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="js/weui.min.js"></script>
<script>
    //mui初始化
    mui.init({
        swipeBack: false
    });
    //上拉下拉设置
    (function($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: true //是否显示滚动条
        });
    })(mui);

    //故障分类数据切换
    function faultSwitch(dataArr) {
        $('.fault-class>li').click(function () {
            $(this).addClass('fault-class-active')
                .siblings('li').removeClass('fault-class-active');
            var index = $('.fault-class>li').index(this);
            var faultHtml='';
            for (var j = 0; j<dataArr[index].length; j++){
                var faultObj = dataArr[index][j];
                faultHtml+='<li class="mui-table-view-cell mui-checkbox mui-left">';
                faultHtml+='<input name="checkbox" type="checkbox">'+faultObj;
                faultHtml+='</li>';
            };
            $('#faultClassWrap').children().remove();
            $('#faultClassWrap').append(faultHtml);
        })
    };

    //故障分类数据渲染
    $.ajax({
        type: "GET",
        url: "faultClassData.json",
        dataType: "json",
        success: function (data) {
            //初始化数据
            var html = '';
            for (var i=0; i<data.faultClass[0].length; i++){
                var obj=data.faultClass[0][i];
                html+='<li class="mui-table-view-cell mui-checkbox mui-left">';
                html+='<input name="checkbox" type="checkbox">'+obj;
                html+='</li>';
            };
            $('#faultClassWrap').append(html);
            //点击切换数据
            faultSwitch(data.faultClass);
        }
    });
    //页面跳转
    $('.footer-block-btn').click(function () {
        window.location.href = 'gzwx.html'
    })
</script>
<script>
    //上传图片
    $(function(){
        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles"),
            $delBtn = $("#delBtn");
        function addImg (upInp,upFile) {
            upInp.on("change", function(e){
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];

                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }

                    upFile.append($(tmpl.replace('#url#', src)));
                }
            });
            upFile.on("click", "li", function(){
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.fadeIn(100);
            });
            /*图片大图展示*/
            $gallery.on("click", function(){
                $gallery.fadeOut(100);
            });
            //删除图片
            $delBtn.on("click", function(){
                var $biImgUrl=$galleryImg.attr("style");
                var $uploaderFilesLi = upFile.find('li');
                $uploaderFilesLi.each(function () {
                    if($(this).attr("style")==$biImgUrl){
                        $(this).remove();
                    }
                })
            });
        };
        addImg($uploaderInput,$uploaderFiles);
    });
</script>
</body>
</html>